<template>
  <div>
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
    />
    <van-search
      v-model="value"
      show-action
      placeholder="请输入小区或地址"
      @search="onSearch"
      class="search"
      background="rgb(255,255,255,0)"
      disabled
    >
      <template #action>
        <div @click="onSearch">
          <van-icon name="location-o" size="25" color="red" @click="$router.push('/maphouse')"/>
        </div>
      </template>
      <template #label>
        <div class="label" @click="$router.push('/citylist')">
          <span class="text">{{city}}</span>
          <span class="triangle"></span>
        </div>
      </template>
    </van-search>
  </div>
</template>

<script>
import { getCityToken, setCityToken, setCityValueToken } from '@/utils/storage'
import { getCityInfoByName } from '@/api/rent'
export default {
  data () {
    return {
      value: ''
    }
  },
  computed: {
    city () {
      return getCityToken() || '上海'
    }
  },
  async created () {
    // 根据城市名称获取该城市信息
    const res = await getCityInfoByName(getCityToken())
    console.log(res)
    console.log('根据城市名称获取该城市信息成功')
    if (!getCityToken()) {
      setCityValueToken(res.body.value)
      setCityToken(res.body.label)
    }
  },
  methods: {
    onSearch (val) {},
    onCancel () {}
  }
}
</script>

<style lang="less" scoped>
.search {
    position: absolute;
    z-index: 9;
    display: flex;
    top: -5px;
    left: 30px;
    .van-search__action {
      padding-top: 10px;
    }
    .label {
      min-width: 50px;
      height: 20px;
      margin-top: 8px;
      // background-color: pink;
      line-height: 20px;
      border-right: 1px solid #e8e8e8;
      .text {
        display: inline-block;
        line-height: 20px;
      }
      .triangle {
        display: inline-block;
        width: 0;
        height: 0;
        border: 8px solid transparent;
        border: 5px solid transparent;
        border-top: 5px solid #7f7f80;
        vertical-align: middle;
        margin-left: 5px;
      }
    }
  }
</style>
